<template>
	<div>
		<el-form size="small" :inline="true" :model="queryform" class="demo-form-inline">
			<el-form-item label="供应商名称" prop="supplierName">
				<el-input v-model="queryform.supplierName"></el-input>
			</el-form-item>
			<el-form-item label="联系人" prop="contacts">
				<el-input v-model="queryform.contacts"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" size="mini" @click="getsupplier">查询</el-button>
				<el-button @click="resetForm()" size="mini">重置</el-button>
			</el-form-item>
		</el-form>
		<el-button type="success" @click="openAddDialog()" size="mini">添加</el-button>
		<el-button type="danger" size="mini" @click="delall()" :disabled="multipleSelection.length === 0">删除</el-button>
		<!-- 表格 -->
		<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" row-key="id"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" :reserve-selection="true" width="55">
			</el-table-column>
			<el-table-column prop="supplierName" label="供应商名称">
			</el-table-column>
			<el-table-column prop="contacts" label="联系人">
			</el-table-column>
			<el-table-column prop="contactPhone" label="联系电话">
			</el-table-column>
			<el-table-column prop="contactAddress" label="联系地址">
			</el-table-column>
			<el-table-column prop="accountNo" label="开户账号">
			</el-table-column>
			<el-table-column label="操作" width="300PX">
				<template slot-scope="scope">
					<el-button size="mini" @click="showGoodsRelDialog(scope.$index, scope.row)">选用供应商品</el-button>
					<el-button size="mini" type="successs" @click="openeditDialog(scope.$index, scope.row)">编辑
					</el-button>
					<el-button size="mini" type="danger" @click="delDialog(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页数据 -->
		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryform.pageNum" :page-sizes="[2, 5,8, 10]" :page-size="queryform.pageSize"
			layout="->,total, sizes, prev, pager, next, jumper" :total="queryform.total">
		</el-pagination>

		<el-dialog :title="supplierFormDialogTitle" :visible.sync="supplierFormDialogVisible" width="500px">
			<el-form :model="supplierForm" size="small" ref="supplierForm">
				<el-form-item label="供应商名称" label-width="120px" prop="supplierName">
					<el-input v-model="supplierForm.supplierName" size="mini" style="width: 200px;" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item label="联系人" label-width="120px" prop="contacts">
					<el-input v-model="supplierForm.contacts" size="mini" style="width: 200px;" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item label="联系电话" label-width="120px" prop="contactPhone">
					<el-input v-model="supplierForm.contactPhone" size="mini" style="width: 200px;" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item label="联系邮箱" label-width="120px" prop="contactEmail">
					<el-input v-model="supplierForm.contactEmail" size="mini" style="width: 200px;" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item label="联系地址" label-width="120px" prop="contactAddress">
					<el-input v-model="supplierForm.contactAddress" size="mini" style="width: 200px;"
						autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="开户银行" label-width="120px" prop="bankOfDeposit">
					<el-input v-model="supplierForm.bankOfDeposit" size="mini" style="width: 200px;" autocomplete="off">
					</el-input>
				</el-form-item>
				<el-form-item label="开户账号" label-width="120px" prop="accountNo">
					<el-input v-model="supplierForm.accountNo" size="mini" style="width: 200px;" autocomplete="off">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancel()">取 消</el-button>
				<el-button type="primary" @click="submitSupplierForm()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 添加商品对话框 -->
		<el-dialog :title="data" :visible.sync="addgoodsVisible">
			<el-button type="primary" @click="showSelectGoodsDialog" size="mini">选择商品</el-button>
			<el-table :data="checkedGoodsListTableData" style="width: 100%">
				<el-table-column type="index" width="50">
				</el-table-column>
				<el-table-column prop="gname" label="商品名称" align="center" width="320">
				</el-table-column>
				<el-table-column prop="purchasePrice" align="center" label="采购价">
				</el-table-column>
				<el-table-column prop="marketPrice" align="center" label="市场价">
				</el-table-column>
				<el-table-column label="操作" width="200PX">
					<template slot-scope="scope">
						<el-button size="mini" type="danger" @click="delgoods(scope.$index, scope.row)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div slot="footer" class="dialog-footer">
				<el-button @click="addgoodsVisible=false">取 消</el-button>
				<el-button type="primary" @click="addgoodsubmit()">确 定</el-button>
			</div>
		</el-dialog>

		<!-- 商品查询 -->
		<el-dialog :title="data" :visible.sync="selectGoodsListVisible" width="1100px">
			<el-form :inline="true" size="small" :model="queryGoodsForm" ref="queryGoodsForm" class="demo-form-inline">
				<el-form-item label="商品名称:" prop="gname">
					<el-input v-model="queryGoodsForm.gname" size="mini" style="width: 140px;" placeholder="商品名称">
					</el-input>
				</el-form-item>
				<el-form-item label="商品型号:" prop="gmodel">
					<el-input v-model="queryGoodsForm.gmodel" size="mini" style="width: 140px;"></el-input>
				</el-form-item>
				<el-form-item label="颜色:" prop="gcolor">
					<el-select v-model="queryGoodsForm.gcolor" placeholder="请选择" clearable size="mini"
						style="width: 140px;">
						<el-option v-for="dict in colorTypes" :key="dict.dicDataVal" :label="dict.dicDataLabel"
							:value="dict.dicDataVal" />
					</el-select>
				</el-form-item>
				<el-form-item label="商品品牌:" prop="gbrand">
					<el-select v-model="queryGoodsForm.gbrand" placeholder="请选择" clearable size="mini"
						style="width: 140px;">
						<el-option v-for="(item,index ) in brandList" :key="index" :label="item.brandName"
							:value="item.brandName" />
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="listGoods()" size="mini" icon="el-icon-search" plain>
						搜索
					</el-button>
					<el-button icon="el-icon-refresh" @click="resetQueryGoodsForm()" size="mini" plain>重置</el-button>
				</el-form-item>
			</el-form>
			<el-table ref="goodsListTableData" :data="goodsListTableData" tooltip-effect="dark" row-key="id"
				@selection-change="handleGoodsSelectionChange">
				<el-table-column type="selection" reserve-selection="true"></el-table-column>
				<el-table-column prop="gcode" label="档案编码" min-width="105%" align="center"></el-table-column>
				<el-table-column prop="gname" label="商品名称" min-width="105%" align="center"></el-table-column>
				<el-table-column prop="goodsType.typeName" label="商品类型" min-width="40%" align="center">
				</el-table-column>
				<el-table-column prop="gbrand" label="商品品牌" min-width="65%" align="center"></el-table-column>
				<el-table-column prop="gmodel" label="商品型号" min-width="75%" align="center"></el-table-column>
				<el-table-column prop="gcolor" label="商品颜色" min-width="40%" align="center" :formatter="formatterColor">
				</el-table-column>
				<el-table-column prop="marketPrice" label="市场价格" min-width="40%" align="center">
				</el-table-column>
				<el-table-column prop="stock" label="库存" min-width="35%" align="center"></el-table-column>
			</el-table>
			<el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2"
				:current-page="queryGoodsForm.pageNum" :page-sizes="[3, 5, 8,10]" :page-size="queryGoodsForm.pageSize"
				layout="->, total, sizes, prev, pager, next, jumper" :total="queryGoodsForm.totalNum">
			</el-pagination>
			<div slot="footer" class="dialog-footer">
				<el-button @click="selectGoodsListVisible=false">取 消</el-button>
				<el-button type="primary" @click="addGoods2Supplier()">选中</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		getDistinctBrand
	} from '@/api/gg/brand.js';
	import {
		getGoodsTypeTree
	} from '@/api/gg/goodsType.js';
	import Treeselect from '@riophae/vue-treeselect'
	import '@riophae/vue-treeselect/dist/vue-treeselect.css'
	export default {
		data() {
			return {
				queryform: {
					supplierName: "",
					contacts: "",
					total: 10,
					pageNum: 1,
					pageSize: 10,
				},
				// table
				tableData: [],
				multipleSelection: [], //多选数据
				// 添加
				supplierFormDialogVisible: false,
				supplierFormDialogTitle: '',
				supplierForm: {
					id: '',
					supplierName: "",
					contacts: "", //联系人
					contactPhone: "",
					contactEmail: "",
					contactAddress: "",
					bankOfDeposit: "",
					accountNo: "",
				},
				queryGoodsForm: {
					gcolor: '',
					gname: '',
					gbrand: '',
					gmodel: '',
					pageNum: 1,
					pageSize: 10,
					totalNum: 0, //总记录数
				},
				selectGoodsListVisible: false,
				//供应商商品
				addgoodsVisible: false,
				checkedGoodsListTableData: [], //供应商商品	
				goodsListTableData: [],
				goodsdata: [], //商品下拉列表
				currentid: "",
				suppliergoods: {
					sid: "",
					gids: [],
				},
				brandList: [],
				goodsTypeTree: [],
				colorTypes: [],
				multipleSelection: []
			}
		},
		methods: {
			addGoods2Supplier(){
				this.multipleSelection.forEach(d=>{
					this.checkedGoodsListTableData.push(d);
				})
				this.selectGoodsListVisible = false;
			},
			handleGoodsSelectionChange(val) {
				this.multipleSelection = val;
			},
			listGoods() {
				axios.get("/goods/select", {
					params: this.queryGoodsForm
				}).then(resp => {
					let t = this.checkedGoodsListTableData;//供应商已绑定商品
					let n=resp.list.filter(item=>!t.some(e=>e.id==item.id))
					this.goodsListTableData = n;//商品查询列表
					this.queryGoodsForm.totalNum = resp.total;
				})
			},
			showSelectGoodsDialog() {
				this.selectGoodsListVisible = true;
				this.multipleSelection=[];
				this.goodsListTableData=[];
				this.$refs['goodsListTableData'].clearSelection();
			},
			//添加供应商商品提交
			addgoodsubmit() {
				this.selectGoodsListVisible = false;
				this.suppliergoods.sid = this.currentid; //获得供应商id
				this.suppliergoods.gids = this.checkedGoodsListTableData.map(i=>i.id).join(","); //获得商品id
				axios.post("/supplier/setGoods2Supplier", this.suppliergoods)
					.then(resp => {
						if (resp.code == 20000) {
							this.suc("供应商绑定商品成功")
							this.supplierForm.id = ""; //刷新选择框
						} else {
							this.error("供应商绑定商品失败")
						}
					})
			},
			delgoods(index, row) {
				let i = this.checkedGoodsListTableData.indexOf(row);
				this.checkedGoodsListTableData.splice(i,1);
			},
			showGoodsRelDialog(index, row) {
				this.currentid = row.id; //打开会话框时,获得当前行的供应商id
				this.supplierForm.supplierName = row.supplierName; //当前行的供应商名称,赋给对话框供应商名称

				axios.get("/supplier/getGoodsBySuplierid?id=" + row.id).then(resp => {
					this.checkedGoodsListTableData = resp.data;
					this.addgoodsVisible = true;
				})
			},
			submitSupplierForm() {
				let id = this.supplierForm.id;
				if (id == null || id == '') {
					this.addsubmit();
				} else {
					this.edidsubmit();
				}
			},
			//提交修改表单
			edidsubmit() {
				this.supplierFormDialogVisible = false;
				axios.put("/supplier", this.supplierForm)
					.then(resp => {
						if (resp.code == 20000) {
							this.suc('修改成功');
							this.getsupplier(); //加载属性数据
						} else {
							this.error('修改失败');
						}
					})
			},
			//提交添加表单
			addsubmit() {
				this.supplierFormDialogVisible = false;
				axios.post("/supplier", this.supplierForm)
					.then(resp => {
						if (resp.code == 20000) {
							this.suc("新增成功!");
							this.getsupplier();
						} else {
							this.error('新增失败!');
						}
					})
			},
			//打开添加会话框
			openAddDialog() {
				this.supplierFormDialogTitle = '新增供应商';
				this.supplierFormDialogVisible = true;
				this.resetsupplierForm();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val; //选中的行集合
			},
			// table中的操作
			openeditDialog(index, row) {
				this.supplierFormDialogTitle = '编辑供应商信息';
				this.resetsupplierForm();
				this.supplierForm = JSON.parse(JSON.stringify(row));
				this.supplierFormDialogVisible = true;
			},
			cancel() {
				this.supplierFormDialogVisible = false;
				this.supplierFormDialogTitle = '';
			},
			resetsupplierForm() {
				this.supplierForm = {
					supplierName: "",
					contacts: "", //联系人
					contactPhone: "",
					contactEmail: "",
					contactAddress: "",
					bankOfDeposit: "",
					accountNo: "",
				};
			},
			resetForm() {
				this.queryform.supplierName = "";
				this.queryform.contacts = "";
				this.getsupplier();
			},
			handleSizeChange(val) {
				this.queryform.pageSize = val;
				this.getsupplier();
			},
			handleCurrentChange(val) {
				this.queryform.pageNum = val;
				this.getsupplier();
			},
			handleSizeChange2(val) {
				this.queryGoodsForm.pageSize = val;
				this.listGoods();
			},
			handleCurrentChange2(val) {
				this.queryGoodsForm.pageNum = val;
				this.listGoods();
			},
			getsupplier() {
				axios.get("/supplier", {
					params: this.queryform
				}).then(resp => {
					this.tableData = resp.list;
					this.queryform.total = resp.total;
					this.queryform.pageNum = resp.pageNum;
					this.queryform.pageSize = resp.pageSize;
				})
			},
			//单删
			delDialog(index, row) {
				this.delData(row.id);
			},
			//多删
			delall() {
				let idsArr = [];
				let i = 0;
				while (i < this.multipleSelection.length) {
					idsArr.push(this.multipleSelection[i].id);
					i++;
				}
				this.delData(idsArr);
			},
			//删除
			delData(ids) {
				this.$confirm(`此操作将永久删除编号为${ids}的数据, 是否继续?`, '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.delete("/supplier/" + ids).then(resp => {
						if (resp.code == 20000) {
							this.$message.success(`删除编号为${ids}的数据` + resp.msg);
							this.getsupplier();
						} else {
							this.$message.error(`删除编号为${ids}的数据` + resp.msg);
						}
					});
				}).catch(() => {
					this.info('已取消删除');
				});
			},
			formatterColor(row, column, cellValue, index) {
				let d = this.parseDictValue(this.colorTypes, cellValue);
				if (d == null) return "-";
				return d.dicDataLabel;
			},
			resetQueryGoodsForm() {
				this.queryGoodsForm = {
					gcolor: '',
					gname: '',
					gbrand: '',
					gmodel: '',
					pageNum: 1,
					pageSize: 5,
					totalNum: 5, //总记录数
				}
			},
		},
		mounted() {
			this.getsupplier();
			getDistinctBrand().then(resp => {
				this.brandList = resp.data;
			});

			getGoodsTypeTree().then(resp => {
				this.goodsTypeTree = resp.data;
			});

			this.getDictItems("phone_color").then(resp => {
				this.colorTypes = resp.data;
			});
		}
	}
</script>

<style>
</style>
